<div class="process">
  <div class="process-left">
      <div draggable="true" class="r-1">
        开始
      </div>
      <div draggable="true"  class="r-2">
            场景
      </div>
      <div draggable="true"  class="r-3"
        [style.background-image]="'url(./assets/img/lingxing.png)'"
      >
        分支
      </div>
      <div draggable="true"  class="r-5">
          分组
      </div>
      <div draggable="true"  class="r-4">
          结束
      </div>
  </div>
    <div class="process-right" (dragover)="dragOver($event)">
        <div [ngClass]="{show: r_1,showLine:d_1}" class="r-1" (drop)="drop('r_1')">
            <span class="editSpan" contenteditable="true" >开始</span>
            <span contenteditable="false"  class="dotted" (click)="showLine('d_1')"></span>
            <i class="arrow" [ngClass]="{showLine:d_1}" [style.background-image]="'url(./assets/img/arrow.png)'"></i>
        </div>
        <div [ngClass]="{show: r_2,showLine:d_2}" class="r-2" (drop)="drop('r_2')" (dblclick)="gotoScenceEditor()">
            <span class="editSpan" contenteditable="true">场景</span>
            <span contenteditable="false"  class="dotted" (click)="showLine('d_2')"></span>
            <i class="arrow" [ngClass]="{showLine:d_2}" [style.background-image]="'url(./assets/img/arrow.png)'"></i>
        </div>
        <div [ngClass]="{show: r_3,leftLine:d_3,rightLine:d_4}" class="r-3" (drop)="drop('r_3')"
             [style.background-image]="'url(./assets/img/lingxing.png)'"
        >
            <span class="editSpan" contenteditable="true" >分支</span>
            <span contenteditable="false"  class="dotted left" (click)="showLine('d_3')"></span>

            <span contenteditable="false"  class="dotted right" (click)="showLine('d_4')"></span>
            <i class="arrow arrow-left" [ngClass]="{showLine:d_3}"  [style.background-image]="'url(./assets/img/arrow.png)'"></i>
            <i class="arrow arrow-right" [ngClass]="{showLine:d_4}" [style.background-image]="'url(./assets/img/arrow.png)'"></i>
        </div>
        <div class="r-group">
            <div [ngClass]="{show: r_9}" (drop)="drop('r_9')">
                <div [ngClass]="{show: r_4,showLine: d_5}" class="r-2" (drop)="drop('r_4')">
                    <span class="editSpan" contenteditable="true" > 场景</span>
                    <span contenteditable="false"  class="dotted" (click)="showLine('d_5')"></span>
                    <i class="arrow" [ngClass]="{showLine: d_5}" [style.background-image]="'url(./assets/img/arrow.png)'"></i>
                </div>
                <div [ngClass]="{show: r_5,leftLine:d_6,rightLine:d_7}" class="r-3" (drop)="drop('r_5')"
                     [style.background-image]="'url(./assets/img/lingxing.png)'"
                >
                    <span class="editSpan" contenteditable="true" >分支</span>
                    <span contenteditable="false"  class="dotted left" (click)="showLine('d_6')"></span>

                    <span contenteditable="false"  class="dotted right" (click)="showLine('d_7')"></span>
                    <i class="arrow arrow-left-short" [ngClass]="{showLine:d_6}" [style.background-image]="'url(./assets/img/arrow.png)'"></i>
                    <i class="arrow arrow-right-short" [ngClass]="{showLine:d_7}" [style.background-image]="'url(./assets/img/arrow.png)'"></i>
                </div>
                <div [ngClass]="{show: r_11||r_12}" style="display: flex;flex-direction: row;justify-content: center;align-items: center">
                    <div  [ngClass]="{show: r_11}" class="r-2" (drop)="drop('r_11')">
                        <span class="editSpan" contenteditable="true" >场景</span>
                    </div>
                    <div [ngClass]="{show: r_12}" class="r-2" (drop)="drop('r_12')">
                        <span class="editSpan" contenteditable="true" >场景</span>
                    </div>
                </div>
            </div>
            <div [ngClass]="{show: r_10}" (drop)="drop('r_10')">
                <div [ngClass]="{show: r_6,showLine:d_8}" class="r-2" (drop)="drop('r_6')">
                    <span class="editSpan"  contenteditable="true">场景</span>
                    <span contenteditable="false"  class="dotted" (click)="showLine('d_8')"></span>
                    <i class="arrow" [ngClass]="{showLine:d_8}" [style.background-image]="'url(./assets/img/arrow.png)'"></i>

                </div>
                <div [ngClass]="{show: r_7, leftLine:d_9,rightLine: d_10}" class="r-3" (drop)="drop('r_7')"
                     [style.background-image]="'url(./assets/img/lingxing.png)'"
                >
                    <span contenteditable="true" class="editSpan">分支</span>
                    <span contenteditable="false"  class="dotted left" (click)="showLine('d_9')"></span>

                    <span contenteditable="false"  class="dotted right" (click)="showLine('d_10')"></span>
                    <i class="arrow arrow-left-short" [ngClass]="{showLine:d_9}" [style.background-image]="'url(./assets/img/arrow.png)'"></i>
                    <i class="arrow arrow-right-short" [ngClass]="{showLine:d_10}" [style.background-image]="'url(./assets/img/arrow.png)'"></i>

                </div>
                <div [ngClass]="{show: r_13||r_14}" style="display: flex;flex-direction: row;justify-content: center;align-items: center">
                    <div  [ngClass]="{show: r_13}" class="r-2" (drop)="drop('r_13')">
                        <span class="editSpan" contenteditable="true" >场景</span>
                    </div>
                    <div [ngClass]="{show: r_14}" class="r-2" (drop)="drop('r_14')">
                        <span class="editSpan" contenteditable="true" >场景</span>
                    </div>
                </div>
            </div>
        </div>
        <div contenteditable="true" [ngClass]="{show: r_8}" class="r-1" style="margin-top: 0" (drop)="drop('r_8')">
            结束
        </div>
        <div contenteditable="true" class="r-4">

        </div>
    </div>
</div>
